<template>
  <div class="aside">
    <div :class="{active:asideindex == index}" v-for="(item, index) in asidelist" :key="index" @click="handleaside(index)">{{ item }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      asidelist: ["热销", "优惠","三文鱼", "刺身", "年货礼品区","野生大对虾","冻货区","贝壳蟹类","鲜虾活鱼",],
      asideindex:0
      };
  },
  methods:{
    handleaside(index){
        this.asideindex = index
    }   
  }
};
</script>

<style scoped>
.aside {
  width: 20%;
  color: gray;
  text-align: left;
  padding: 0 15px;
}
.aside div {
  margin-top: 20px;
}
.aside .active{
    color: red;
    border-left: 3px solid red;
}
</style>